<!-- 我要投诉 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="我要投诉" :borderBottom="false"></u-navbar>
		<view class="top flex_align">
			<image :src="shopimg"></image>
			<view>
				<view class="shopName">{{shopname}}</view>
				<view class="name" v-if="keepername">店主实名：{{keepername}}</view>
			</view>
		</view>
		<view class="bot">
			<view class="title">投诉内容</view>
			<view class="content">
				<textarea maxlength="200" placeholder="写下你的内容，平台会为你处理~" v-model="content"></textarea>
				<view class="count">{{content.length}}/200</view>
			</view>
			<view class="title">投诉凭证({{images.length}}/6)</view>
			<u-upload ref="upload" max-size="12328959" :action="action" :file-list="fileList" width="180" height="180" max-count="6" @on-remove="removeimg" @on-uploaded="uploaded"></u-upload>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="btn" @click="submits">提交</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				action:"",
				//已上传列表{url: '',}
				fileList: [],
				// 后台需要的数据
				images:[],
				// 投诉内容
				content:"",
				//投诉id
				type_id:-1,
				//投诉类型 1-商家用户 2-普通用户
				type:1,
				//来源 1-商城 2-社区 3-其他
				source:1,
				shopname:"",
				keepername:"",
				shopimg:"",
				
			}
		},
		onLoad(options) {
			_this=this
			_this.action=_this.$api.getbase()+'fileupload'
			_this.shopname=options.shopname
			_this.keepername=options.keepername
			_this.shopimg=options.shopimg
			_this.type_id=options.type_id
			_this.type=options.type
			_this.source=options.source
		},
		methods: {
			// 删除图片
			removeimg(e){
				_this.images.splice(e,1)
			},
			// 上传成功
			uploaded(e){
				_this.images = []
				e.forEach((item,index) => {
					if(item.response){
						if(item.response.code==1){
							_this.images.push(item.response.data.url)
							
						}else{
							_this.$refs['upload'].remove(index)
						}
					}	
				})
			},
			submits(){
				if(_this.content.length<1){
					wx.showToast({
						title:"请输入内容",
						icon:"none"
					})
				}else{
					let data={}
					data.content=_this.content;
					data.type_id=_this.type_id;
					data.source=_this.source;
					data.type=_this.type;
					data.images=_this.images.toString()
					_this.$api.post("complaint", data).then(data => {
						wx.showToast({
							title:"提交成功"
						})
						setTimeout(function(){
							wx.navigateBack({delta: 1})
						},1000);
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f3f3;
	}

	.top {
		width: 700rpx;
		height: 148rpx;
		margin: 19rpx auto 14rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 16rpx 24rpx 25rpx;

		image {
			width: 106rpx;
			height: 106rpx;
			margin-right: 10rpx;
			border-radius: 50%;
			background-color: #B3D9FB;
		}

		.shopName {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
		}

		.name {
			margin-top: 17rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #666666;
		}
	}

	.bot {
		width: 700rpx;
		margin: 0 auto;
		padding: 0 40rpx;
		background: #ffffff;
		border-radius: 10rpx;
		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: left;
			color: #333333;
			padding-top: 36rpx;
		}

		.content {
			width: 618rpx;
			padding:36rpx 32rpx 0;
			margin: 35rpx auto;
			background: #ffffff;
			border: 1rpx solid #c1c1c1;
			border-radius: 9rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #999999;
			line-height: 36rpx;
			textarea{
				width: 555rpx;
				height: 150rpx;
			}
			.count{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: right;
				color: #999999;
				margin-bottom: 20rpx;
			}
		}
	}

	.btn{
		width: 680rpx;
		height: 88rpx;
		background: linear-gradient(86deg,#38be8c 0%, #05adbb 100%);
		border-radius: 44rpx;
		font-size: 36rpx;
		font-family:PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		line-height: 88rpx;
		letter-spacing: -1rpx;
		position: fixed;
		bottom:41rpx;
		left:32rpx;
		z-index: 99;
	}
</style>
